<template>
	<view>
		<form class="form-cust bg-white">
			<view class="cu-form-group">
				<view class="title">标题</view>
				<input placeholder="不填写将从内容自动获取" v-model="pub.title" class="text-right" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class='text-red'>*</text>工作城市</view>
				<picker mode="multiSelector" @change="cityChange" @columnchange="coluChange" range-key="label" :range="citys" :value="cityVal">
					<view class="picker">
						{{selCity.label}}
					</view>
				</picker>
			</view>
			
			<view v-if="type==1" class="cu-form-group">
				<view class="title">薪资待遇</view>
				<input class="text-right solid" type="number" placeholder="例如：7000" v-model="pub.salary1" name="input" />
				<text class="padding-left padding-right">至</text>
				<input class="text-right solid" type="number" placeholder="例如：8000" v-model="pub.salary2" name="input" />
			</view>
			<view v-else class="cu-form-group">
				<view class="title">薪资要求</view>
				<input class="text-right" type="number" placeholder="例如：10000" v-model="pub.salary" name="input" />
			</view>
			<view class="cu-form-group ">
				<view class="title">驾照要求</view>
				<picker @change="dlTypeChange" :range="license" range-key="dlTypeName">
					<view class="picker"> {{dlTypeName}} </view>
				</picker>
			</view>
			<view class="cu-form-group ">
				<view class="title"><text class='text-red'>*</text>{{type=='1'?'招聘':'求职'}}类型</view>
				<picker @change="dtTypeChange" range-key="dtypeName" :range="driverRecruit">
					<view class="picker">
						{{dtypeName}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class='text-red'>*</text>{{type=='1'?'招聘':'求职'}}详情</view>
			</view>
			<view class="bg-white padding-bottom-sm">
				<textarea class='solid-blue bg-gray padding-xs' style="margin:0 auto;height:200px" maxlength="500" name='content' placeholder='默认信息的第一句将会成为标题'
				 @blur="setTitle" v-model="pub.content"></textarea>
			</view>
			<view class="cu-form-group solid-top">
				<view class="title">联系人</view>
				<input class="text-right" placeholder="输入联系人" v-model="pub.linkMan" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class='text-red'>*</text>电话</view>
				<input class="text-right" placeholder="输入电话" v-model="pub.phone" name="input"></input>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action">
					图片说明 <text class="text-gray">（最多3张）</text>
				</view>
				<view class="action">
					{{imgList.length}}/3
				</view>
			</view>
			<img-upload :imgs="imgList"  @change="changeImg" />
			<view class="cu-form-group ">
				<text>发布条款</text>
				<view class="padding-lr">
					<radio @click="radioChange" :checked="check" />
					<text class="padding-lr-sm">我同意条款，保证信息合法合规</text>
				</view>
			</view>
			<button :disabled="check ? false : true" class="cu-btn block bg-blue margin-tb-sm lg margin" @click="pubInfo">发布</button>
		</form>
	</view>
</template>

<script>
	import {isPhone} from '../../utils/util.js'
	import proData from '../../utils/city-data/province.js'
	import cityData from '../../utils/city-data/city.js'
	import ImgUpload from '../../components/img-upload.vue'
	export default {
		components:{
			ImgUpload
		},
		data() {
			return {
				check: true,
				citys: [proData, [{label: '不限', value: ''}]],
				cityVal: [0, 0],
				driverRecruit: [],
				license: [],
				pub: {
					ancId: '',
					title: '',
					recruitType: '',
					areaCode: '320500', //苏州
					salary: '',
					salary1: '',
					salary2: '',
					dlTypeId: '',
					dtypeId: '',
					linkMan: '',
					phone: '',
					content: '',
					labIDArr: [],
					infoPicList:[],
					infoPicPathArr:[]
				},
				selCity: {
					label: '苏州市',
				},
				imgList: [],
				dlTypeName: '不限',
				dtypeName: '不限',
				type: 1,
			};
		},
		onLoad(option) {
			let ancInfo = uni.getStorageSync('ancInfo');
			if(ancInfo){
				// 表单
				this.type = ancInfo.recruitType;
				this.pub.recruitType = ancInfo.recruitType;
				this.pub.ancId = ancInfo.ancId;
				this.pub.title = ancInfo.title;
				this.pub.areaCode = ancInfo.areaCode;
				this.pub.dlTypeId = ancInfo.dlTypeId;
				this.pub.dtypeId = ancInfo.dtypeId;
				this.pub.linkMan = ancInfo.linkMan;
				this.pub.phone = ancInfo.phone;
				this.pub.content = ancInfo.content;
				// 显示
				this.dlTypeName = ancInfo.dlTypeName;
				this.dtypeName = ancInfo.dtypeName;
				this.selCity.label = ancInfo.cityName;
				// 图片
				if(ancInfo.infoPicList.length>0){
					this.imgList =ancInfo.infoPicList.map(v=>v.picURL)
				}else {
					this.imgList = ancInfo.infoPicPathArr ? ancInfo.infoPicPathArr : [];
				}
				// 薪资
				if(ancInfo.salary.indexOf('-') != -1){
					this.pub.salary = '';
					this.pub.salary1 = ancInfo.salary.split('-')[0];
					this.pub.salary2 = ancInfo.salary.split('-')[1];
				}else{
					this.pub.salary = ancInfo.salary=='面谈' ? '' : ancInfo.salary;
					this.pub.salary1 = ancInfo.salary1;
					this.pub.salary2 = ancInfo.salary2;
				}
			}
			
			// 驾照与求职列表
			let defa = [{
				dtypeId: '',
				dtypeName: '不限'
			}];
			let d = uni.getStorageSync("driverRecruit");
			if (d) {
				this.driverRecruit = defa.concat(d);
			}
			let def = [{
				dlTypeId: '',
				dlTypeName: '不限'
			}];
			let sd = uni.getStorageSync("license");
			if (sd) {
				this.license = def.concat(sd);
			}
		},

		methods: {
			changeImg:function(val){
				this.imgList=val
			},
			//
			cityChange(e){
				let val = e.detail.value;
				// 只选省
				if(0 == val[1]){
					this.selCity = this.citys[0][val[0]];
					this.pub.areaCode = this.citys[0][val[0]].value;
				}else{
					this.selCity = this.citys[1][val[1]];
					this.pub.areaCode = this.citys[1][val[1]].value;
				}
			},
			// 省市联动
			coluChange(e){
				let column = e.detail.column;
				let index = e.detail.value;
				if(0 == column){
					let top = [{label: '不限', value: ''}];
					let city = this.citys[0][index];
					if(0 == index){
						this.citys = [proData, top]
					}else{
						this.citys = [proData, top.concat(cityData[index])]
					}
				}
			},
			// 详情第一句设为标题
			setTitle(e){
				let val = e.detail.value;
				if(val && !this.pub.title){
					let title = val.split('。')[0];
					if(title.length > 18){
						title = title.substring(0, 15) + '...'
					}
					this.pub.title = title;
				}
			},
			radioChange() {
				this.check = !this.check
			},
			dlTypeChange(e) {
				let idx = e.detail.value;
				this.pub.dlTypeId = this.license[idx].dlTypeId;
				this.dlTypeName = this.license[idx].dlTypeName;
			},
			dtTypeChange(e) {
				let idx = e.detail.value;
				this.pub.dtypeId = this.driverRecruit[idx].dtypeId;
				this.dtypeName = this.driverRecruit[idx].dtypeName;
			},
			pubInfo(e) {
				if (this.imgList.length > 0) {
					this.pub.infoPicPathArr = this.imgList;
				}
				if(!isPhone(this.pub.phone)){
					uni.showToast({
						title: '手机号码有误',
						icon: 'none'
					})
					return;
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				let _this = this;
				this.baseRequest('api/driver/info/polishupdate', 'PUT', this.pub, function(res, info) {
					uni.hideLoading();
					setTimeout(() => {
						uni.showToast({
						  title: '修改成功'
						});
						setTimeout(() => {
						  uni.hideToast();
						  uni.navigateTo({
						  	url: '/pages/user/mypub'
						  })
						}, 1000)
					}, 0);
				});
			},
		}
	}
</script>